<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-demo</title>
  <script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
</head>
<body>
  <div id="app">
    <div>{{name}}</div>
    <div ref="age">{{age}}</div>
    <div @click="change">改变</div>
    <div><my-child @hook:mounted="complete">
      <template v-slot:slotone="record">{{ record}}</template>
    </my-child></div>
    <div v-tag="tag">123</div>
  </div>
</body>
<script>
  var child = Vue.component('my-child', {
    template: "<div>{{title}}我是child<slot name='slotone' sex='12'></slot></div>",
    props: {
      title: {
        type: String,
        default: 'haha'
      }
    },
    created() {
      console.dir('子组件--created---2')
    },
    mounted() {
      console.dir('子组件--mounted---3')
    },
    beforeUpdate() {
      console.dir('子组件--beforeUpdate')
    },
    updated() {
      console.dir('子组件--updated')
    },
  })
  var vm = new Vue({
    el: "#app",
    directives: {
      tag: {
        bind:function(el, binding, vnode) {
          console.log(el)
           el.addEventListener('click', function() {
             console.log(3)
           })
        },
        inserted:function(el, binding, vnode) {
          console.log(typeof binding.value)
          const value = binding.value ? 'block' : 'none'
            el.style.display = value
          console.log(el)
          console.log(binding)
          console.log(vnode)
        },
        update: function(el, binding) {
          console.log('update')
          const value = binding.value ? 'block' : 'none'
            el.style.display = value
        },
        componentUpdated: function() {
          console.log('componentUpdated')
        },
        unbind: function() {
          console.log(22)
        }
      }
    },
    data: {
      tag: false,
      name:'zhangli',
      age: 32
    },
    created() {
      console.dir('父组件--created---1')
    },
    mounted() {
      console.dir('父组件--mounted---4')
    },
    beforeUpdate() {
      console.dir('父组件--beforeUpdate')
    },
    updated() {
      console.dir('父组件--updated')
    },
    methods: {
      complete() {
        console.log('我完成啦')
      },
      change() {
        this.name = 'chentian'
        this.tag = !this.tag
        this.$nextTick(() => {
          console.log(this.$refs.age.innerHTML)
        })
        this.age = 34
        
      }
    },
  })
</script>
</html>